<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../Style/style.css">
    <script src="../../Script/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.AccordionContainer");
    </script>
</head>
<body>
<div id="markupAccordion" data-dojo-type="dijit.layout.AccordionContainer"
     data-dojo-attach-point='style:"width:400px;height:600px;overflow:hidden"'>
    <div id="panel" data-dojo-type="dijit.layout.ContentPane"
         data-dojo-props='selected:true, title:"Pane 1", iconClass:"dijitEditorIcon dijitEditorIconSave", tool:"tooltip for simple pane"'>
        First pane.
    </div>
    <div id="panel2" data-dojo-type="dijit.layout.ContentPane"
         data-dojo-props='title:"Pane 2", iconClass:"dijitEditorIcon dijitEditorIconpaste"'>
        Second pane.
    </div>
    <div id="panel3" data-dojo-type="dijit.layout.ContentPane"
         data-dojo-props='title:"Pane 3", iconClass:"dijitEditorIcon dijitEditorCut"'>
        <p>Here's a BorderContainer</p>
        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props='style:"height:200px;width:300px"'>
            <div data-dojo-type="dijit.layout.ContentPane"
                 data-dojo-props='region:"left",style:"width:100px",splitter:true'>
                West area.
            </div>
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"center"'>
                Center area.
            </div>
        </div>
        <p>And a TabContainer:</p>
        <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props='stryle:"height:200px;width:300px"'>
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 1"'>
                Tab 1 content.
            </div>
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 2"'>
                Tab 2 content.
            </div>
        </div>
        <p>Text after the Widgets.</p>
    </div>
</div>
</body>
</html>
